<template>
  <div class="tag-container">
    <h2>标签管理</h2>

    <!-- 一级标签 -->
    <div class="tag-level">
      <h3>一级标签
        <button class="add-btn" @click="addTag(1)">新增</button>
      </h3>
      <div class="tags">
        <button
            v-for="tag in level1Tags"
            :key="tag.tagId"
            @click="fetchSubTags(tag.tagId, 1)">
          {{ tag.tagName }}
          <button class="delete-btn" @click.stop="deleteTag(tag.tagId)">删除</button>
        </button>
      </div>
    </div>

    <!-- 二级标签 -->
    <div class="tag-level">
      <h3>二级标签
        <button class="add-btn" @click="addTag(2)">新增</button>
      </h3>
      <div class="tags">
        <button
            v-for="tag in level2Tags"
            :key="tag.tagId"
            @click="fetchSubTags(tag.tagId, 2)">
          {{ tag.tagName }}
          <button class="delete-btn" @click.stop="deleteTag(tag.tagId)">删除</button>
        </button>
      </div>
    </div>

    <!-- 三级标签 -->
    <div class="tag-level">
      <h3>三级标签
        <button class="add-btn" @click="addTag(3)">新增</button>
      </h3>
      <div class="tags">
        <button v-for="tag in level3Tags" :key="tag.tagId">
          {{ tag.tagName }}
          <button class="delete-btn" @click.stop="deleteTag(tag.tagId)">删除</button>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import {fetchLevel1Tags, fetchLevel2Tags, addTagInfo,deleteTagInfo} from '@/components/js/ImageService'; // 导入 tagService

export default {
  data() {
    return {
      level1Tags: [],  // 一级标签
      level2Tags: [],  // 二级标签
      level3Tags: [],  // 三级标签
      parentTagId: "", // 默认父标签 ID
    };
  },
  mounted() {
    this.fetchLevel1Tags();  // 组件加载时获取一级标签
  },
  methods: {
    // 获取一级标签
    async fetchLevel1Tags() {
      try {
        this.level1Tags =await fetchLevel1Tags();
      } catch (error) {
        console.error('获取一级标签失败:', error);
      }
    },

    // 获取子标签（传入tagId和当前层级）
    async fetchSubTags(tagId, level) {
      try {
        if (level === 1) {
          this.level2Tags = await fetchLevel2Tags(tagId);
          this.level3Tags = []; // 清空三级标签
        } else if (level === 2) {
          this.level3Tags = await fetchLevel2Tags(tagId);
        }
        this.parentTagId = tagId; // 记录当前父级 ID
      } catch (error) {
        console.error(`获取${level + 1}级标签失败:`, error);
      }
    },

    // 新增标签
    async addTag(level) {
      const tagName = prompt(`请输入新的${level}级标签名称：`);
      if (!tagName) return;

      const tagData = {
        tagName: tagName,
        tagLevel: level.toString(),
        parentTagId: this.parentTagId, // 使用当前选中的父 ID
      };

      try {
        await addTagInfo(tagData);

        // 重新获取数据
        if (level === 1) {
          this.fetchLevel1Tags();
        } else {
          this.fetchSubTags(this.parentTagId, level - 1);
        }
      } catch (error) {
        console.error('新增标签失败:', error);
        alert('新增失败，请检查后台服务！');
      }
    },
    // 删除标签方法
    async deleteTag(tagId) {
      try {
        // 调用后端接口删除标签
        await deleteTagInfo(tagId);

        // 删除成功后，更新标签列表
        this.level1Tags = this.level1Tags.filter(tag => tag.tagId !== tagId);
        this.level2Tags = this.level2Tags.filter(tag => tag.tagId !== tagId);
        this.level3Tags = this.level3Tags.filter(tag => tag.tagId !== tagId);

        // 提示用户删除成功
        alert('标签删除成功');
      } catch (error) {
        console.error('删除标签失败:', error);
        alert('删除标签失败，请重试');
      }
    },
  }
};
</script>

<style scoped>
@import '@/css/styles.css';
</style>
